<template>
  <FormTitle text="短信" class="content-title">
    <template #extra>
      <a-button type="link" v-if="!isUpdate" @click="editInfo">编辑信息</a-button>
      <a-button type="link" v-if="isUpdate" @click="handleEdit">确认修改</a-button>
      <a-button type="link" v-if="isUpdate" @click="handleBack">返回</a-button>
    </template>
  </FormTitle>
  <div class="content mt-3">
    <BasicForm @register="registerForm" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref, unref } from 'vue';
  import FormTitle from '/@/components/HFormTitle';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { columns, EmailFormSchema, DDFormSchema, SMSFormSchema } from './config.data';
  import {
    getConfigByKeyApi,
    saveThirdPartyConfigApi,
    saveSmsConfigApi,
    saveFilerServerConfigApi,
    saveEmailConfigApi,
    saveDingConfigApi,
  } from '/@/api/admin/tenant';

  const isUpdate = ref(false);
  let result: any = {};

  const api = {
    TENANT_EMAIL_CONFIG: saveEmailConfigApi, // 邮件
    TENANT_DINGTALK_MSG_CONFIG: saveDingConfigApi, // 钉钉
    TENANT_SMS_CONFIG: saveSmsConfigApi, // 短信
    TENANT_WECHAT_CONFIG: () => {}, // 微信
    TENANT_THIRD_PARTY_CONFIG: saveThirdPartyConfigApi, // 第三方
    TENANT_FILE_SERVER_CONFIG: saveFilerServerConfigApi, // 文件服务
  };
  export default defineComponent({
    name: 'TenantConfig3',
    components: { FormTitle, BasicForm },
    setup() {
      const { prefixCls } = useDesign('tenant-config3');
      const { createMessage } = useMessage();

      // const formSchema
      const type = ref(columns[2].value);
      const [registerForm, { resetFields, setFieldsValue, validate, setProps }] = useForm({
        labelWidth: 120,
        layout: 'vertical',
        disabled: true,
        baseColProps: { md: 11, lg: 6, span: 6, offset: 2, pull: 2 },
        schemas: SMSFormSchema,
        showActionButtonGroup: false,
      });

      const changeType = async ({ value }) => {
        type.value = value;
        isUpdate.value = false;
        setProps({ disabled: true });
        let schemas: any[] = [];
        switch (value) {
          case 'TENANT_EMAIL_CONFIG':
            schemas = EmailFormSchema;
            break;
          case 'TENANT_DINGTALK_MSG_CONFIG':
            schemas = DDFormSchema;
            break;
          case 'TENANT_SMS_CONFIG':
            schemas = SMSFormSchema;
            break;
          default:
            break;
        }
        // resetSchema(schema);
        setProps({ schemas });
        await init(value);
      };

      onMounted(() => {
        changeType(columns[2]);
      });

      async function init(value) {
        resetFields();

        const ret = await await getConfigByKeyApi(value);

        setFieldsValue(ret);
      }

      async function handleSumbit() {
        const params = await validate();
        console.log(
          '%cparams===>72： ',
          'background: rgb(23, 197, 237,.6); color: #ff5023; font-size:18px;font-weight:700',
          params,
        );
        await api[type.value](params);
        createMessage.success('操作成功');

        isUpdate.value = false;
        setProps({ disabled: true });
      }
      const handleEdit = () => {
        handleSumbit();
      };
      const editInfo = () => {
        isUpdate.value = true;
        setProps({ disabled: !unref(isUpdate) });
      };
      const handleBack = () => {
        isUpdate.value = false;
        setProps({ disabled: !unref(isUpdate) });
        setFieldsValue({
          ...result,
        });
      };
      return {
        type,
        columns,
        prefixCls,
        registerForm,
        changeType,
        handleSumbit,
        isUpdate,
        handleEdit,
        editInfo,
        handleBack,
      };
    },
  });
</script>

<style lang="less">
  @prefix-cls: ~'@{namespace}-tenant-config';

  .@{prefix-cls} {
    // background-color: @background-color-light;
    .vben-basic-form {
      &[disabled='true'] {
        .ant-form-item-label {
          label {
            color: @text-color-call-out;
          }
        }
      }

      .ant-input-number-disabled,
      .ant-input-affix-wrapper-disabled {
        // background-color: transparent;
        color: #333;

        > .ant-input[disabled] {
          color: #333;
        }
      }
    }
  }
</style>
